<template>
  <div class="detail-page">
    <el-page-header  @back="$router.back()" />

    <el-card v-if="detail" class="mt-4">
      <template #header></template>
      
      <!-- …更多字段… -->
<div class="order-detail-status">
    <div class="left">
      <div class="status-title">订单状态：{{ statusText }}</div>
      <div class="btn-group">
        <el-button plain size="small">订单跟踪</el-button>
        <el-button plain size="small">调度跟踪</el-button>
      </div>
    </div>
    <div class="right">
      <div class="steps">
        <div
          v-for="(step, idx) in steps"
          :key="step.label"
          class="step"
        >
          <div
            class="circle"
            :class="{
              finished: idx < currentStep,
              active: idx === currentStep
            }"
          >
            <template v-if="idx < currentStep">
              <el-icon><Check /></el-icon>
            </template>
            <template v-else>
              {{ idx + 1 }}
            </template>
          </div>
          <div class="label">{{ step.label }}</div>
          <div v-if="idx < steps.length - 1" class="line"></div>
        </div>
      </div>
    </div>
  </div>


    </el-card>

    <el-empty v-else description="加载中…" />
  </div>

  
</template>

<script setup>

import {  onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getOrderDetail } from '@/api/order'   // ← 确保已实现 export
import { ref, computed } from 'vue'
import { Check } from '@element-plus/icons-vue'

// 假设你已从接口获取到订单详情
const orderDetail = ref({
  orderBasic: {
    deliveryStatus: 2 // 示例：2=骑手配送中
  }
})

/* 路由参数 */
const route = useRoute()
const id = ref(route.params.id)        // 保证响应式

/* 数据与状态 */
const detail   = ref(null)
const loading  = ref(false)
const errorMsg = ref('')

const deliveryStatus = computed(() => orderDetail.value.orderBasic.deliveryStatus)
const statusText = computed(() => statusMap[deliveryStatus.value]?.text || '未知状态')
const currentStep = computed(() => statusMap[deliveryStatus.value]?.step || 0)

// 步骤配置
const steps = [
  { label: '顾客下单' },
  { label: '商家接单' },
  { label: '配送商品' },
  { label: '确认送达' },
  { label: '评价' }
]
/* 配送状态字典 */
const statusMap = {
  1: { text: '待骑手接单', step: 1 },
  2: { text: '骑手配送中', step: 2 },
  3: { text: '已送达', step: 3 },
  4: { text: '配送超时', step: 4 },
  5: { text: '配送超时', step: 5 },
  6: { text: '配送超时', step: 6 },
  7: { text: '配送超时', step: 7 },
  8: { text: '配送超时', step: 8 },
  9: { text: '配送超时', step: 9 },

  // 你可以根据实际后端状态码补充
}

/* 核心：拉取订单详情 */
async function fetchDetail (orderId) {
  loading.value  = true
  detail.value   = null
  errorMsg.value = ''
  try {
    const resp = await getOrderDetail(orderId)
    detail.value = resp.data          // 后端 AjaxResult.success(data)
  } catch (err) {
    errorMsg.value = err?.msg || '加载失败'
    ElMessage.error(errorMsg.value)
  } finally {
    loading.value = false
  }
}

/* 首次进入页面拉数据 */
onMounted(() => fetchDetail(id.value))

/* 若同一个组件复用，监听路由参数变化自动刷新 */
watch(
  () => route.params.id,
  newId => {
    id.value = newId
    fetchDetail(newId)
  }
)

</script>


<style scoped>
.order-detail-status {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
}
.left {
  flex: 1;
}
.status-title {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 18px;
}
.btn-group {
  display: flex;
  gap: 12px;
}
.right {
  flex: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.steps {
  display: flex;
  align-items: center;
  gap: 0;
}
.step {
  display: flex;
  align-items: center;
  position: relative;
}
.circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #bfcbd9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  border: 2px solid #e4e7ed;
  transition: all 0.2s;
}
.circle.finished {
  background: #ecf5ff;
  color: #409eff;
  border-color: #409eff;
}
.circle.active {
  background: #409eff;
  color: #fff;
  border-color: #409eff;
}
.label {
  margin-top: 8px;
  text-align: center;
  font-size: 15px;
  color: #333;
  width: 60px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 40px;
}
.line {
  width: 60px;
  height: 2px;
  background: #e4e7ed;
  margin: 0 8px;
}
.step .circle.finished + .line {
  background: #409eff;
}
</style>